<template>
    <div class="apilist" ref="apilist">
        <div class="content" ref="content">
            <div class="bt">落基伟业API列表</div>
            <el-select v-model="leibie" placeholder="请选择分类" style="padding: 20px;">
              <el-option label="分类1" value="分类1"></el-option>
            </el-select>
            <div class="apilists" v-loading="loading">
              <div class="flex" v-for="item in list" :key="item.id" >
                  <div @click="godetail(item.id)">{{item.title}}</div>
                  <div class="fz12">
                    <el-button type="primary" size="mini" @click="godetail(item.id)">查看</el-button>
                    <el-button type="danger" size="mini" @click="fixdetail(item.id)">修改</el-button>
                    <el-button type="danger" size="mini" @click="deletes(item.id)">删除</el-button>
                  </div>
              </div>
            </div>
          <el-pagination style="text-align: right; padding: 20px;" background layout="total,prev, pager, next" :current-page="page" @current-change="fanye" :page-size="pagesize" :total="total"></el-pagination>
        </div>
    </div>
</template>

<script>
    import E from "wangeditor";
    import axios from "axios";

    export default {
        name: "apilist",
        data(){
            return{
              leibie:"",
              total:0,
              pagesize:20,
              page:1,
              list:"",
              loading:false
            }
        },
        created() {
          this.getlist()


        },
        mounted() {

          this.$refs.content.style.minHeight = window.innerHeight - 40 +'px';
        },
        methods:{
          godetail:function(id){
            this.$router.push({
              path:'/apidetail',
              query:{'id':id}
            })
          },
          //翻页
          fanye:function(page){
            this.loading = true
            this.page = page
            this.getlist()
          },
          //获取列表
          getlist:function(){
            var that = this
            axios.get('/api/plan-market/api/getapilist?page='+this.page+'&page_size='+this.pagesize+'&leibie='+this.leibie)
              .then(response => {
                if(response.data.msg.code == 0){
                  that.list = response.data.data.data
                  that.total = response.data.data.total
                  that.loading = false
                }else{
                  that.$message.error(response.data.msg.info);
                }
              })
          },
        }
    }
</script>

<style scoped lang="scss">
    .apilist{ width: 100%; background: #EAEAEA; padding: 20px; box-sizing: border-box;
        .content{ width: 1200px; margin: 0px auto; background: #ffffff; border-radius: 3px; box-shadow: 0 0 10px 10px #cccccc; padding-bottom: 20px;  box-sizing: border-box;
            .bt{ font-size: 20px; border-bottom: 1px #EAEAEA solid; padding: 20px; font-weight: bold; font-family: "Microsoft JhengHei"; margin-bottom: 20px;}
            .flex{ display: flex; justify-content: space-between;}
            .apilists{ padding: 0 20px; display: flex; flex-wrap: wrap; justify-content: space-between; font-size: 14px; line-height: 28px;
              .flex{ color: #333333; padding:10px 0; border-bottom:1px #eaeaea solid; width:45%;}
            }
            .fz12{ font-size: 14px; line-height: 21px;}

        }

    }
</style>
